<template>
    <div class="app-container">
        <!-- 基础信息 -->
        <h5 class="titleInfo">基础信息</h5>
        <el-form class="form" ref="form" :rules="rules" :model="form" label-width="100px">
            <el-form-item label="地区">
                <el-cascader :options="options" v-model="selectedOptions" @change="pcaList"></el-cascader>
            </el-form-item>
            <el-form-item label="图片">
                <img
                    class="elFormImg"
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569231219848&di=01487ad5b9c7e96daa4eb610f00f901b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170902%2Ff78fd97aed5b400a8fb861ae1c469aae.jpeg"
                    alt
                />
            </el-form-item>
        </el-form>
        <div class="divBar" />
        <!-- 其他信息 -->
        <h5 class="titleInfo">其他信息</h5>
        <el-form class="form" ref="form" :rules="rules" :model="form" label-width="100px">
            <el-form-item label="会员手机号">
                <span class="spanToInput">你好世界</span>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-select filterable v-model="form.reviewStatus" placeholder="请选择">
                    <el-option
                        v-for="item in reviewOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="autoUpdate" disabled @click.native="handelUpdate(autoUpdate)"></el-switch>
            </el-form-item>
            <div style="margin:0 20px">
                <el-table
                    :data="tableData6"
                    border
                    max-height="400"
                    :summary-method="getSummaries"
                    show-summary
                    style="width: 100%; margin-top: 20px"
                >
                    <el-table-column prop="id" label="ID" width="180" sortable></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="a" label="数值 1（元）"></el-table-column>
                    <el-table-column prop="c" label="数值 3（元）"></el-table-column>
                </el-table>
            </div>
            <el-form>
                <el-form-item label="素材图">
                    <newUpload
                        ref="uploadImg"
                        :fileNum="fileNum"
                        :fileList="fileList"
                        :width="-1"
                        :height="-1"
                    />
                </el-form-item>
            </el-form>
            {{imgList}}
            <el-form-item>
                <el-button class="submitBtn" type="primary" @click="submitFn('form')">立即提交</el-button>
            </el-form-item>
        </el-form>
        <div class="divBar" />
        <!-- 弹窗组件 -->
        <h5 class="titleInfo">弹窗组件</h5>
        <div class="dialogDiv">
            <!-- 添加按钮 -->
            <el-button type="primary" @click="addFn()">添加</el-button>
            <el-button type="primary" @click="editFn('688')">编辑</el-button>
            <!-- 对话框 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="468px">
                <el-form :model="dialogForm" ref="dialogForm" label-width="100px">
                    <el-form-item label="医院名称">
                        <el-input v-model="dialogForm.hospitalName"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogCancel()">取 消</el-button>
                    <el-button v-if="dialogFormFlag" type="primary" v-on:click="sumbitAdd()">确 定</el-button>
                    <el-button v-else type="primary" v-on:click="sumbitEdit()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- <el-select v-model="cardId" placeholder="请选择">
            <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item,index) in cardType"
                :key="index"
            ></el-option>
        </el-select>
        <p>{{cardId | cardFn}}</p> -->
        <template>
            <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="日期" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="toggleSelection()">切换第二、第三行的选中状态</el-button>
            </div>
        </template>
    </div>
</template>
<script>
import vipManage from "@/api/vipManage";
import phoneReg from "@/utils/validate";
import newUpload from "@/components/imgUpload/index";
import { policy } from "@/api/policy";

export default {
    name: "vipAdd",
    components: { newUpload },
    data() {
        return {
            imgList: [],
            fileList: [],
            cardId: "4",
            // cardType: [],
            fileNum: 3,
            autoUpdate: true,
            reviewOptions: [
                {
                    label: "你好",
                    value: "nh"
                },
                {
                    label: "世界",
                    value: "sj"
                }
            ],
            form: {
                username: "",
                password: "",
                nickName: "",
                province: "",
                city: "",
                area: "",
                headImage: "",
                reviewStatus: ""
            },
            rules: {
                username: [
                    { required: true, validator: phoneReg, trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                nickName: [
                    { required: true, message: "请输入昵称", trigger: "blur" }
                ],
                province: [
                    { required: true, message: "请输入省市区", trigger: "blur" }
                ]
            },
            options: [],
            selectedOptions: [],
            tableData6: [
                {
                    id: "12987122",
                    name: "王小虎",
                    a: "234",
                    c: 10
                },
                {
                    id: "12987123",
                    name: "王小虎",
                    a: "165",
                    c: 12
                },
                {
                    id: "12987124",
                    name: "王小虎",
                    a: "324",
                    c: 9
                },
                {
                    id: "12987125",
                    name: "王小虎",
                    a: "621",
                    c: 17
                },
                {
                    id: "12987126",
                    name: "王小虎",
                    a: "539",
                    c: 15
                }
            ],
            // 弹窗
            dialogTitle: "",
            dialogFormVisible: false,
            dialogFormFlag: false,
            dialogForm: {
                hospitalName: ""
            },
            editId: null,
            tableData: [
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-06",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                }
            ],
            multipleSelection: []
        };
    },
    filters: {
        cardFn(e) {
            // return window.helper.cardType(String(e));
        }
    },
    // components:{uploadImg},
    mounted() {
        // 省市区数据获取
        var addData = require("../../../../static/address/area.json");
        this.options = addData;
        // 获取身份下拉列表
        // this.cardType = window.helper.cardType("listReturn");

        this.toggleSelection([this.tableData[1], this.tableData[2]])
    },
    methods: {
        toggleSelection(rows) {
            // console.log(rows)
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        // 警告状态弹窗
        warningStatus(txt) {
            this.eleMsg(txt, "warning");
        },
        //switch开关
        handelUpdate(autoUpdate) {
            let strOpen = "是否确认开启开关。";
            let strClose = "是否确认关闭开关。";
            let defineFn = () => {
                // console.log("函数");
                if (!autoUpdate) {
                    this.autoUpdate = true;
                    this.succStatus("成功打开");
                } else {
                    this.autoUpdate = false;
                    this.succStatus("成功关闭");
                }
                // this.succStatus("hello，world")
            };
            let confirmDatas = {
                desc: "改变该条状态, 是否继续?",
                title: "提示",
                confirmBtnTxt: "确定",
                cancelBtnTxt: "取消",
                fn: defineFn,
                catchInfo: "已取消"
            };
            this.eleConfirm(confirmDatas);
        },
        //confirm框
        eleConfirm(e) {
            this.$confirm(e.desc, e.title, {
                confirmButtonText: e.confirmBtnTxt,
                cancelButtonText: e.cancelBtnTxt,
                type: "warning"
            })
                .then(() => {
                    e.fn();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: e.catchInfo
                    });
                });
        },
        // 省市区数据改变
        pcaList(value) {
            let e = this.selectedOptions;
            e = value;
            this.form.province = e[0];
            this.form.city = e[1];
            this.form.area = e[2];
        },
        //新增会员请求
        vipAddFn() {
            let datas = this.form;
            vipManage.add(datas).then(res => {
                // console.log(res)
                if (!res.data.code) {
                    this.$message({
                        showClose: true,
                        message: "添加成功",
                        type: "success"
                    });
                    this.$router.push("/vipIndex");
                } else {
                    this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: "warning"
                    });
                }
            });
        },
        // 立即提交
        submitFn(e) {
            this.imgList = this.$refs.uploadImg.submitUpload();
            // this.$refs[e].validate((valid) => {
            //     if (valid) {
            //         this.form.headImage = ""
            //         this.vipAddFn()
            //     }else{
            //         this.$message({
            //             message: '有必填项没填，不能提交咯',
            //             type: 'warning'
            //         });
            //     }
            // })
        },
        // table表数据合计
        getSummaries(param) {
            //param 是固定的对象，里面包含 columns与 data参数的对象 {columns: Array[4], data: Array[5]},包含了表格的所有的列与数据信息
            const { columns, data } = param;
            //console.log(data)
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总价";
                    return;
                }
                const values = data.map(item => item[column.property]);
                //验证每个value值是否是数字，如果是执行if
                if (
                    !values.every(value => isNaN(value)) &&
                    values.every(value => typeof value == "number")
                ) {
                    sums[index] = values.reduce((prev, curr) => {
                        return prev + curr;
                    }, 0);
                    sums[index] += "";
                } else {
                    sums[index] = "N/A";
                }
            });
            return sums;
        },
        // 弹出窗封装
        addFn() {
            this.dialogFormVisible = true;
            this.dialogFormFlag = true;
            this.dialogForm.hospitalName = "";
            this.dialogTitle = "添加弹出窗";
        },
        sumbitAdd() {
            this.dialogFormVisible = false;
            // console.log("添加", this.dialogForm);
        },
        editFn(e) {
            this.dialogFormVisible = true;
            this.dialogFormFlag = false;
            this.dialogForm.hospitalName = "好医院";
            this.editId = e;
            this.dialogTitle = "编辑弹出窗";
        },
        sumbitEdit() {
            this.dialogFormVisible = false;
            let datas = { ...this.dialogForm };
            datas["id"] = this.editId;
            // console.log("编辑", datas);
        },
        dialogCancel() {
            this.dialogFormVisible = false;
        }
    }
};
</script>
<style scoped>
.app-container {
    padding: 0px !important;
}
.submitBtn {
    margin-top: 20px;
    margin-bottom: 20px;
}
.dialogDiv {
    margin: 0 20px;
    padding-bottom: 20px;
}
</style>
